<template>
	<view>
		<fa-navbar title="审核不通过"></fa-navbar>
		<u-gap height="30" bg-color="#F6F8FB"></u-gap>
		<h1 class="font32 col-main text-center pt-1 f-w500">选择不通过原因</h1>
		<view class="p-2">
			<ul class="fa-reject-reason">
				<li v-for="item in reason" :key="item.id" :class="{active: item.check}" @click="checkReason(item)">{{ item.name }}</li>
			</ul>
			<view class="mt-3 p-m2 b-r10" style="border: 1px solid #DADADA;background-color: #F6F8FB;">
				<u-input v-model="rejectDesc" :clearable="false" type="textarea" :placeholder="boxTips"  @input="changeTextarea" :maxlength="maxlength"
				:height="280" :auto-height="false" :customStyle="{'color': '#4F5053', 'padding': 0}"/>
				<view class="col-gray text-right pt-m1 font24"><text>已输入 {{ rejectDesc.length }}/500</text></view>
			</view>
		</view>
		<view class="pos-fix p-2 bg-ff fullwidth" style="bottom: 0;">
			<u-button
				class="btn-grad"
				shape="circle"
				type="primary"
				@click="rejectHandle">
				确认处置
			</u-button>
		</view>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	export default {
		components: {
			faNavbar
		},
		data() {
			return {
				loading: false,
				reason: [{id: 1, name: '数量有误', check: true},{id: 2, name: '资产信息有误', check: false},{id: 3, name: '其他问题', check: false}],
				rejectDesc: '',
				maxlength: -1,
				handleGuid: '',
				boxTips: '请输入反馈信息（非必填）'
			}
		},
		onLoad(options) {
			this.handleGuid = options.hGuid;
		},
		
		watch: {

			// 监听粘贴内容是否超出最大长度
			rejectDesc(nval, oval) {
				if (nval.length > 500) {
					this.rejectDesc = this.rejectDesc.slice(0, 500);
				}
			},
		},
		methods: {
			// 兼容iOS iOS计数时出现不一致的行为，未到500却不能输入了，动态控制maxlength
			changeTextarea(e) {
				e.length > 499 ? this.maxlength = 500 : this.maxlength = -1
			},
			// 选择拒绝原因
			checkReason(data) {
				if (data.id == 3) {
					this.boxTips = '请输入反馈信息（必填）'
				} else {
					this.boxTips = '请输入反馈信息（非必填）'
				}
				this.reason.forEach(ele => { ele.check = false });
				data.check = true;
			},
			
			// 拒绝处置
			rejectHandle() {
				uni.showLoading({title: '处置中', mask: true});
				let reason,
					check = this.reason.filter(v => v.check);
				if (check[0].id == 3 && this.rejectDesc == "") {
					return uni.showToast({
						title: '请输入反馈信息',
						icon: 'none'
					})
				}
				reason = check[0].name + '#&#' + this.rejectDesc; // #&# 目前只提供一个参数，所以驳回原因和反馈合并一个字段用 #&# 分割
				this.$api.refuseHandle({Reason: reason, HandleGuid: this.handleGuid})
					.then(res => {
						if (res.code == 0) {
							uni.showToast({ title: '处置成功'});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						} else {
							uni.showToast({ title: '处置失败，请稍后再试', icon: 'none'})
						}
						uni.hideLoading();
					})
					.catch(err => console.error(err));
			}
		}
	}
</script>

<style lang="scss">
	.fa-reject-reason {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		li {
			flex: 0 0 30%;
			text-align: center;
			background-color: #F6F8FB;
			color: #2A2A2A;
			padding: 20rpx 0;
			&.active {
				background-color: #ECF4FF;
				color: #2E73E5;
			}
		}
	}
</style>
